<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example: Checkbox Buttons (YUI Library)</title>

        <!-- Reset and Fonts -->
        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
 
        <!-- CSS for Button -->
        <link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
 
        <!-- Page-specific styles -->
        <style type="text/css">

            body { margin:.5em; }

            h1 { font-weight:bold; }

            fieldset, 
            fieldset div {

                border:2px groove #ccc;
                margin:.5em;
                padding:.5em;

            }
        </style>

        
        <!-- Dependency source files -->
        <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="../../build/element/element-beta.js"></script>

        <!-- Button source file -->
        <script type="text/javascript" src="../../build/button/button-beta.js"></script>

        <!-- Page-specific JavaScript -->
        <script type="text/javascript">

            YAHOO.example.init = function () {
                // "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>

                function onCheckboxButtonsMarkupReady() {
            
                    // Create Buttons using existing <input> elements as a data source
            
                    var oCheckButton1 = new YAHOO.widget.Button("checkbutton1src", { id:"checkbutton1", label:"One" });
                    var oCheckButton2 = new YAHOO.widget.Button("checkbutton2src", { id:"checkbutton2", label:"Two" });
                    var oCheckButton3 = new YAHOO.widget.Button("checkbutton3src", { id:"checkbutton3", label:"Three" });
                    var oCheckButton4 = new YAHOO.widget.Button("checkbutton4src", { id:"checkbutton4", label:"Four" });
        

                    // Create Buttons using the YUI Button markup

                    var oCheckButton5 = new YAHOO.widget.Button("checkbutton5", { type:"checkbox", value:"1", checked:true });
                    var oCheckButton6 = new YAHOO.widget.Button("checkbutton6", { type:"checkbox", value:"2"});
                    var oCheckButton7 = new YAHOO.widget.Button("checkbutton7", { type:"checkbox", value:"3" });
                    var oCheckButton8 = new YAHOO.widget.Button("checkbutton8", { type:"checkbox", value:"4" });

                }

                YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", onCheckboxButtonsMarkupReady);


                // Create Buttons without using existing markup

                var oCheckButton9 = new YAHOO.widget.Button({ type:"checkbox", label:"One", id:"checkbutton9", name:"checkboxfield3", value:"1", container:"checkboxbuttonsfromjavascript", checked:true });
                var oCheckButton10 = new YAHOO.widget.Button({ type:"checkbox", label:"Two", id:"checkbutton10", name:"checkboxfield3", value:"2", container:"checkboxbuttonsfromjavascript" });
                var oCheckButton11 = new YAHOO.widget.Button({ type:"checkbox", label:"Three", id:"checkbutton11", name:"checkboxfield3", value:"3", container:"checkboxbuttonsfromjavascript" });
                var oCheckButton12 = new YAHOO.widget.Button({ type:"checkbox", label:"Four", id:"checkbutton12", name:"checkboxfield3", value:"4", container:"checkboxbuttonsfromjavascript" });

            } ();

        </script>

    </head>
    <body>

        <h1>Example: Checkbox Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>

        <form id="example" name="example" method="post" action="example03.html">

            <fieldset id="checkboxbuttons">
                <legend>Checkbox Buttons</legend>

                <fieldset id="checkboxbuttonsfrommarkup">
                    <legend>From Markup</legend>

                    <div>
                        <input id="checkbutton1src" type="checkbox" name="checkboxfield1" value="1" checked>
                        <input id="checkbutton2src" type="checkbox" name="checkboxfield1" value="2">
                        <input id="checkbutton3src" type="checkbox" name="checkboxfield1" value="3">
                        <input id="checkbutton4src" type="checkbox" name="checkboxfield1" value="4">
                    </div>

                    <div>
                        <span id="checkbutton5" class="yuibutton"><span class="first-child"><button type="button" name="checkboxfield2">One</button></span></span>
                        <span id="checkbutton6" class="yuibutton"><span class="first-child"><button type="button" name="checkboxfield2">Two</button></span></span>
                        <span id="checkbutton7" class="yuibutton"><span class="first-child"><button type="button" name="checkboxfield2">Three</button></span></span>
                        <span id="checkbutton8" class="yuibutton"><span class="first-child"><button type="button" name="checkboxfield2">Four</button></span></span>
                    </div>

                </fieldset>

                <fieldset id="checkboxbuttonsfromjavascript">
                    <legend>From JavaScript</legend>
                </fieldset>

            </fieldset>

            <div>
                <input type="reset" name="resetbutton" value="Reset Form">
                <input type="submit" name="submitbutton" value="Submit Form">
            </div>

        </form>

    </body>
</html>